<template>
    <div class="app-container">
        <!-- 头部搜索 -->
        <div class="top-form" style="text-align: center;">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="试卷名:">
                    <el-input v-model="queryForm.examName" placeholder="请输入试卷名称"
                    :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="班级:" prop="classesId" style="padding-left: 30px;">
                    <el-select v-model="queryForm.classesId" placeholder="请选择班级" remote reserve-keyword filterable 
                        clearable>
                        <el-option v-for="item in classesItems" :key="item.id" :value="item.id"
                                    :label="item.classesName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round  icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 数据展示栏 -->
        <div class="main">
            <el-table ref="multipleTable" :data="tblData"  border style="width: 100%">
                <el-table-column  type="selection" width="55"> </el-table-column>
                <el-table-column align="center" label="序号" type="index" width="50px"></el-table-column>
                <el-table-column align="center" prop="examName" label="试卷名" width="350px"> </el-table-column>
                <el-table-column align="center" prop="classesName" label="考试班级" width="180px"> </el-table-column>
                <el-table-column label="班级人数" align="center" width="180px" prop="classesNum">
                    <template slot-scope="scope">
                        <span> {{ scope.row.classesNum ? scope.row.classesNum :0}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center" prop="classesNum" label="班级人数" width="180px"> </el-table-column> -->
                <el-table-column align="center" prop="actualNum" label="考试人数" width="180px"> </el-table-column>
                <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleAnalysis(scope.row)">成绩详情</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="textAlign:center;margin-top: 20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.pageIndex"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="queryForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {classesList} from '@/api/classes/classes'
import {scoreList} from '@/api/exam/exam'
export default {
    name:'ScoreList',
    data(){
        return{
            queryForm:{
                examName:'',
                classesId:null,
                pageIndex:1,
                pageSize:10,
            },
            //班级的集合
            classesItems:[],
            tblData:[],
            total: 0,
        }
    },
    mounted(){
        //初始化班级合集
        this.getClassesList("_");
        //初始化试卷
        this.search();
    },
    methods:{
        async search(){
            console.log('search');
            let res = await scoreList(this.queryForm);
            this.tblData = res.data.records;
            this.total = res.data.total;
        },
        //得到班级的合集
        async getClassesList(val){
            let res = await classesList(val);
            this.classesItems = res.data;
        },
        //进入成绩分析
        handleAnalysis(row){
            this.$router.push({
                name:'ScoreAnalysis',
                params:{
                    'examId':row.examId,
                    'classesId':row.classesId,
                    'classesName':row.classesName,
                    'examName':row.examName
                }
            })
        },
        handleSizeChange(val) {
            this.queryForm.pageSize = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.queryForm.pageIndex = val;
            this.search();
        },
    }
}
</script>

<style scoped>

</style>